<template>
  <div class="quick-actions-container" :class="{ 'collapsed': isCollapsed }">
    <div class="quick-actions-bar">
      <div class="actions-group">
        <button 
          v-for="action in quickActions" 
          :key="action.id"
          class="action-btn"
          :class="{ 'active': action.active }"
          @click="handleAction(action)"
          :title="action.title"
        >
          <span class="action-icon">{{ action.icon }}</span>
          <span class="action-text" v-show="!isCollapsed">{{ action.title }}</span>
        </button>
      </div>
      
      <div class="actions-divider" v-show="!isCollapsed"></div>
      
      <div class="status-group" v-show="!isCollapsed">
        <div class="status-item">
          <span class="status-icon">💰</span>
          <span class="status-text">今日销售: ¥{{ todaySales }}</span>
        </div>
        <div class="status-item">
          <span class="status-icon">📋</span>
          <span class="status-text">订单数: {{ orderCount }}</span>
        </div>
        <div class="status-item">
          <span class="status-icon">👥</span>
          <span class="status-text">会员数: {{ memberCount }}</span>
        </div>
      </div>
      
      <!-- 折叠按钮 -->
      <button class="collapse-toggle-btn" @click="toggleCollapse" :title="isCollapsed ? '展开' : '折叠'">
        <span class="collapse-icon">{{ isCollapsed ? '▼' : '▲' }}</span>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式数据
const todaySales = ref(2580.50)
const orderCount = ref(45)
const memberCount = ref(128)
const isCollapsed = ref(false)

// 快速操作配置
const quickActions = ref([
  {
    id: 'pos',
    title: '快速收银',
    icon: '💰',
    route: '/pos',
    active: false
  },
  {
    id: 'scan',
    title: '扫码',
    icon: '📱',
    action: 'scan',
    active: false
  },
  {
    id: 'search',
    title: '搜索商品',
    icon: '🔍',
    action: 'search',
    active: false
  },
  {
    id: 'member',
    title: '会员查询',
    icon: '👤',
    action: 'member',
    active: false
  },
  {
    id: 'print',
    title: '打印小票',
    icon: '🖨️',
    action: 'print',
    active: false
  },
  {
    id: 'settings',
    title: '设置',
    icon: '⚙️',
    route: '/settings',
    active: false
  }
])

// 切换折叠状态
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
}

// 处理操作
const handleAction = (action) => {
  // 重置所有活动状态
  quickActions.value.forEach(item => item.active = false)
  
  // 设置当前活动状态
  action.active = true
  
  if (action.route) {
    // 导航到指定路由
    router.push(action.route)
  } else if (action.action) {
    // 执行特定操作
    executeAction(action.action)
  }
}

// 执行特定操作
const executeAction = (actionType) => {
  switch (actionType) {
    case 'scan':
      console.log('启动扫码功能')
      // 这里可以触发扫码事件
      break
    case 'search':
      console.log('打开搜索面板')
      // 这里可以打开搜索面板
      break
    case 'member':
      console.log('打开会员查询')
      // 这里可以打开会员查询
      break
    case 'print':
      console.log('打印小票')
      // 这里可以触发打印功能
      break
    default:
      console.log('未知操作:', actionType)
  }
}

// 更新状态数据
const updateStatus = () => {
  // 这里可以从API获取实时数据
  todaySales.value = 2580.50
  orderCount.value = 45
  memberCount.value = 128
}

// 暴露方法供父组件调用
defineExpose({
  updateStatus,
  toggleCollapse
})
</script>

<style scoped>
.quick-actions-container {
  background: white;
  border-bottom: 1px solid #e4e7ed;
  padding: 6px 24px;
  transition: all 0.3s ease;
}

.quick-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.actions-group {
  display: flex;
  gap: 6px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background: white;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
  white-space: nowrap;
}

.action-btn:hover {
  background: #f5f7fa;
  border-color: #409eff;
  color: #409eff;
}

.action-btn.active {
  background: #409eff;
  border-color: #409eff;
  color: white;
}

.action-icon {
  font-size: 14px;
}

.action-text {
  font-size: 12px;
  font-weight: 500;
}

.actions-divider {
  width: 1px;
  height: 24px;
  background: #e4e7ed;
}

.status-group {
  display: flex;
  gap: 16px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #606266;
}

.status-icon {
  font-size: 14px;
}

.status-text {
  font-weight: 500;
}

.collapse-toggle-btn {
  background: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #606266;
  min-width: 32px;
}

.collapse-toggle-btn:hover {
  background: #e4e7ed;
  border-color: #c0c4cc;
  color: #303133;
}

.collapse-icon {
  font-size: 12px;
  transition: transform 0.3s ease;
}

/* 折叠状态下的样式 */
.quick-actions-container.collapsed {
  padding: 4px 24px;
}

.quick-actions-container.collapsed .quick-actions-bar {
  justify-content: center;
}

.quick-actions-container.collapsed .action-btn {
  padding: 4px 8px;
}

.quick-actions-container.collapsed .action-icon {
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .quick-actions-bar {
    flex-direction: column;
    gap: 12px;
  }
  
  .actions-group {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .status-group {
    justify-content: center;
  }
  
  .collapse-toggle-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (max-width: 768px) {
  .quick-actions-container {
    padding: 4px 16px;
  }
  
  .action-btn {
    padding: 4px 8px;
    font-size: 10px;
  }
  
  .action-icon {
    font-size: 12px;
  }
  
  .status-group {
    flex-direction: column;
    gap: 4px;
  }
  
  .status-item {
    font-size: 10px;
  }
  
  .collapse-toggle-btn {
    position: static;
    transform: none;
    margin-left: auto;
  }
}

@media (max-width: 480px) {
  .actions-group {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 8px;
  }
  
  .action-btn {
    flex-direction: column;
    text-align: center;
    padding: 8px;
  }
  
  .quick-actions-container.collapsed .action-btn {
    padding: 6px;
  }
}
</style> 